<template>
  <div class="suppl-cost-wrap">
    <div class="cost-title">补充费用 <span>(单位：元)</span></div>
    <el-table :key="tableKey"
              border
              :span-method="arraySpanMethod"
              :data="table">
      <template v-for="(column, index) in columns">
        <el-table-column :key="index"
                         :label="column.label">
          <template slot-scope="scope">
            <div v-if="column.type === 'type'">
              <add-cost v-if="!scope.row.typeDisabled"
                        v-model="scope.row[column.name]"
                        :options="options"
                        :disabled="scope.row.disabled"
                        @input="handleSelect" />
              <span v-else
                    :class="[scope.row.title ? 'c-primary' : '']">{{
                scope.row.typeName
              }}</span>
            </div>
            <!-- oninput="this.value=(this.value.match(/^[-]{0,1}\d{0,7}(\.\d{0,2})?/)||[''])[0];" -->
            <div v-else-if="column.name === 'money' && column.type === 'input'">
              <el-input v-if="!scope.row.typeDisabled"
                        v-model="scope.row[column.name]"
                        :disabled="!scope.row.type"
                        @input="handleInput(scope.row, column.name)" />
              <span v-else>{{ scope.row[column.name] ? thousandDigit(scope.row[column.name], 2) : 0 }} </span>
            </div>
            <div v-else-if="column.name === 'remarks'">
              <div v-if="!scope.row.typeDisabled && !scope.row.barginDisabled && column.type === 'remarks'">
                <el-input v-model="scope.row[column.name]"
                          maxlength="200"
                          :disabled="!scope.row.type"
                          style="width: calc(100% - 40px)" />
                <span @click="removeFee(scope.$index, scope.row)">
                  <icon-svg class="icon-delete"
                            icon-name="shanchu2"></icon-svg>
                </span>
              </div>
              <span v-else>{{ scope.row[column.name] || "--" }} </span>
            </div>
            <div v-else-if="column.name == 'type'"
                 :class="[scope.row.title ? 'c-primary' : '']">
              {{ scope.row.title || scope.row.typeName }}
            </div>
            <div v-else
                 :class="[column.type === 'total' ? 'c-primary f14' : '']">
              {{ scope.row[column.name] ? thousandDigit(scope.row[column.name], 2) : (column.name === 'money' ? 0 : '--') }}
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div v-if="!display"
         class="add-cost">
      <span @click="addFee">
        <icon-svg class="c-primary"
                  icon-name="tianjiazhandian"></icon-svg>
        新增费用
      </span>
    </div>
  </div>
</template>

<script>
import AddCost from "@/components/advance/AddCost.vue";
import emptyImg from "@/static/images/no_data.png";
import { tableColumn, options } from "./bargain.data";
import { returnThousandDigit } from "@/libs/util.js";
export default {
  name: "SupplementFee",
  components: {
    AddCost
  },
  props: {
    dynamicTable: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    /* 状态 */
    status: {
      type: [String, Number],
      default: null
    },
    /* 需要隐藏新增按钮的状态 */
    hideStatus: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      tableColumn,
      options: options,
      emptyImg,
      tableKey: null
    };
  },
  computed: {
    columns () {
      const typeMap = new Map([
        ["type", this.disabled ? "text" : "type"],
        ["money", this.disabled ? "text" : "input"],
        ["remarks", this.disabled ? "text" : "remarks"],
        ["total", "text"]
      ]);

      this.tableColumn.forEach((column) => {
        column.type = typeMap.get(column.name) || "text";
      });

      return this.tableColumn;
    },
    table () {
      if (this.dynamicTable.length) {
        this.dynamicTable.forEach((item) =>
          this.$set(item, "total", item.money)
        );
      }
      let data = options.filter(({ value }) =>
        this.dynamicTable.some(({ type }) => type === value)
      );
      /* 补充报价状态 费用项刷新 */
      if (this.status != "2") {
        data.forEach(item => {
          item.disabled = true;
        });
      }
      return this.dynamicTable;
    },
    display () {
      return this.hideStatus.includes(this.status);
    },
    filteredDynamicTable () {
      return filterStatus => this.dynamicTable
        .filter((item) => filterStatus
          .some((items) => item.status != items.status));
    },
    filteredOptions () {
      return exists => options.filter((option) => exists
        .some((item) => option.value === item.type))
        .forEach((item) => { item.disabled = true });
    },
    initOptionsStatuses () {
      return ['10', '2', '0'];
    }
  },
  created () {
    /* 关闭后的报价单刷新费用项 */
    if (this.initOptionsStatuses.includes(this.status)) {
      options.forEach(item => {
        if (item.disabled) {
          delete item.disabled;
        }
      });
    }
  },
  methods: {
    thousandDigit (value, digit) {
      return returnThousandDigit(value, digit)
    },
    arraySpanMethod ({ row }) {
      if (row.title) {
        return [1, 4];
      }
    },
    // 新增费用
    addFee () {
      const hasEmptyItem = this.dynamicTable.some(({ type, title }) => !type && !title);

      if (hasEmptyItem) {
        this.$message.warning("请选择费用项！");
        return;
      }

      this.$emit('addFee');
    },
    // 删除费用
    removeFee (index, row) {
      options.forEach(item => {
        if (item.value === row.type) {
          delete item.disabled
        }
      });
      this.$emit("removeFee", index, row)
      this.handleInput(row, "");
    },
    // 选择费用项
    handleSelect (val) {
      this.dynamicTable.forEach((item) =>
        item.type === val ? (item.disabled = true) : ""
      );
      let filterStatus = this.dynamicTable.filter(({ status }) => status);
      let exists = this.filteredDynamicTable(filterStatus)

      this.filteredOptions(exists)
    },
    // 输入费用
    handleInput (row, name) {
      let regStr = /^(-)?\d{0,7}(\.\d{0,2})?$/g;
      row[name] = row[name] && row[name].replace(" ", '');
      if (name && !regStr.test(row[name])) {
        row[name] = null;
      }

      let num = 0;
      this.dynamicTable.map((item) => {
        num += Number(item.money === "-" ? 0 : item.money || 0);
      });
      this.$set(row, "total", row.money);
      this.$emit("onTotal", 2, Number(num).toFixed(2));
    }
  }
};
</script>

<style scoped lang="scss">
.cost-title {
  margin: 20px 0;
  font-size: 16px;
  span {
    color: var(--prev-border-color-grey);
    font-size: 12px;
  }
}
.icon-delete {
  color: var(--prev-icon-color-orange);
  cursor: pointer;
  margin-left: 5px;
  font-size: 16px;
}
.add-cost {
  border: 1px solid var(--prev-border-color-lighter);
  text-align: center;
  padding: 8px;
  font-size: 14px;
  color: var(--prev-color-text-primary);
  margin-top: -1px;
  height: 40px;
  line-height: 40px;
  span {
    cursor: pointer;
  }
  .icon {
    font-size: 20px;
  }
}
.verify-tips {
  color: var(--prev-color-text-purered);
}
</style>
